<!DOCTYPE html>
<html>
<head>
    <title>Circuit Diagram</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <canvas id="circuitCanvas" width="400" height="550"></canvas>
    <script>
        const canvas = document.getElementById('circuitCanvas');
        const ctx = canvas.getContext('2d');

        // Style settings
        ctx.strokeStyle = 'black';
        ctx.lineWidth = 2;
        ctx.fillStyle = 'black';
        
        // Coordinates and dimensions
        const xLeft = 100;
        const xRight = 300;
        const xMid = (xLeft + xRight) / 2;
        
        const yTop = 100;
        const ySwitchBreak = yTop + 20; // The point where the right wire is broken for the switch
        const yFirstLamp = 170;
        const yLampSpacing = 65;
        const lampRadius = 18;
        const terminalRadius = 6;
        const terminalGap = 15;
        const yLastLamp = yFirstLamp + 4 * yLampSpacing;

        // Helper function to draw a lamp symbol (circle with a cross)
        function drawLamp(x, y, radius) {
            ctx.beginPath(); // Start a new path for the lamp
            // Draw the circle
            ctx.arc(x, y, radius, 0, 2 * Math.PI);
            // Draw the cross inside the circle
            const offset = radius / Math.sqrt(2);
            ctx.moveTo(x - offset, y - offset);
            ctx.lineTo(x + offset, y + offset);
            ctx.moveTo(x + offset, y - offset);
            ctx.lineTo(x - offset, y + offset);
            ctx.stroke();
        }

        // --- Drawing Starts Here ---

        // 1. Draw text labels
        ctx.font = '30px Arial';
        ctx.textAlign = 'center';
        ctx.fillText('power supply', xMid, 60);

        ctx.font = 'bold 24px Arial';
        ctx.fillText('Fig. 9.2', xMid, yLastLamp + 70);

        // 2. Draw the main wires of the circuit
        ctx.beginPath();
        
        // Left vertical bus bar
        ctx.moveTo(xLeft, yTop);
        ctx.lineTo(xLeft, yLastLamp);
        
        // Right vertical bus bar (the part below the switch)
        ctx.moveTo(xRight, ySwitchBreak);
        ctx.lineTo(xRight, yLastLamp);
        
        // Horizontal branches for the lamps
        for (let i = 0; i < 5; i++) {
            const y = yFirstLamp + i * yLampSpacing;
            ctx.moveTo(xLeft, y);
            ctx.lineTo(xRight, y);
        }
        
        // Top wire connecting to the power supply
        ctx.moveTo(xLeft, yTop);
        ctx.lineTo(xMid - terminalGap - terminalRadius, yTop);
        
        ctx.moveTo(xMid + terminalGap + terminalRadius, yTop);
        ctx.lineTo(xRight, yTop);
        
        // Draw the open switch
        ctx.moveTo(xRight, ySwitchBreak); // Hinge of the switch
        ctx.lineTo(xRight - 30, yTop - 15); // The switch arm in open position
        
        ctx.stroke(); // Render all the wires drawn so far

        // 3. Draw components (lamps and terminals) that are not simple lines
        
        // Draw the five lamps
        for (let i = 0; i < 5; i++) {
            const y = yFirstLamp + i * yLampSpacing;
            drawLamp(xMid, y, lampRadius);
        }
        
        // Draw the power supply terminals (open circles)
        ctx.beginPath();
        ctx.arc(xMid - terminalGap, yTop, terminalRadius, 0, 2 * Math.PI);
        ctx.stroke();
        
        ctx.beginPath();
        ctx.arc(xMid + terminalGap, yTop, terminalRadius, 0, 2 * Math.PI);
        ctx.stroke();

    </script>
</body>
</html>